<template>
    <div class="flex justify-center items-center">
        <n-image :src="src" width="280" height="280" class="border" />
    </div>
</template>

<script lang="js" setup>
import { NImage } from 'naive-ui';
import QRCode from 'qrcode'

const props = defineProps(['data'])

const src = ref();
// With promises
QRCode.toDataURL(props.data,{
    width:280,
    height:280,
    margin:2
})
    .then(url => {
        src.value = url;
    })
    .catch(err => {
        console.error(err)
    })
</script>
